<template>
  <el-dialog title="添加功能" v-model="showNewModule" :width="500" :append-to-body="true">
    <el-form :inline="true" :model="newModuleForm" :label-width="80" class="newModuleForm">
      <el-form-item label="模块类型">
        <el-input v-model="newModuleForm.moduleType" readonly/>
      </el-form-item>
      <el-form-item label="路径">
        <el-input v-model="newModuleForm.path"/>
      </el-form-item>
      <el-form-item label="功能名称">
        <el-input v-model="newModuleForm.name"/>
      </el-form-item>
      <el-form-item label="模版">
        <el-select v-model="newModuleForm.template">
          <el-option
              v-for="item in moduleTemplate"
              :key="item.label"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="">
        <el-button @click="()=>{$data.showNewModule=false;}">取消</el-button>
        <el-button type="primary" @click="submitNewModule">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {getLayoutList} from "../../runtime/CmpStore";

export default {
  data() {
    return {
      showNewModule: false,
      moduleTemplate: getLayoutList()
          .filter(item => this.moduleType === item.options.layoutType && item.options.designSupport)
          .map(({layout, name}) => ({value: layout, label: `${name}(${layout})`})),
      newModuleForm: {
        path: "",
        name: "",
        template: "",
        moduleType: 'pc'
      },
    }
  },
  methods: {
    show(path, moduleType) {
      this.moduleTemplate = getLayoutList()
          .filter(item => moduleType === item.layoutType && item.designSupport)
          .map(({layout, name}) => ({value: layout, label: `${name}(${layout})`})),

          this.showNewModule = true;
      this.newModuleForm = {
        path: "",
        name: "",
        template: "",
        moduleType: moduleType
      }
      if (path) this.newModuleForm.path = path
      if (moduleType) this.newModuleForm.moduleType = moduleType
    },
    close() {
      this.showNewModule = false;
    },
    submitNewModule() {
      this.$emit("submitNewModule", this.newModuleForm);
    },
  },
}
</script>

<style>
.newModuleForm .el-form-item {
  width: 100%;
}
</style>